<!-- eslint-disable vue/valid-template-root -->
<template>
  <div>
    <div class="header">
      <div class="add">

        <el-button type="success" size="medium" @click="dialogFormVisible = true">添加GP游戏</el-button>
        <el-button type="success" size="medium" @click="dialogFormVisible = true">添加R18游戏</el-button>

        <el-dialog align="center" title="添加游戏" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="游戏名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="GoogelPlay地址" :label-width="formLabelWidth">
              <el-input v-model="form.region" autocomplete="off" />
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addGPgame">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple" />
          <el-popconfirm title="确定更新吗？" @onConfirm="putIcon">
            <el-button slot="reference" size="small">批量更新icon</el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确定更新吗"
            @onConfirm="putConter"
          >
            <el-button slot="reference" size="small">批量更新详情</el-button>
          </el-popconfirm>

        </el-col>
        <el-col :span="16"><div class="grid-content bg-purple" />
          <div class="search">
            <el-select v-model="value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              clearable
              style="width:68%;padding-right: 10px;"
            />
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24"><div class="grid-content bg-purple" />
        <div class="app-container">
          <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border stripe fit highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55"
              align="center"
            />
            <el-table-column class-name="age-limit-col" label="图标" width="110" align="center">
              <template slot-scope="scope">
                <el-image
                  style=" width: 50px;
                  height: 50px;
                  border-radius: 5px; "
                  :src="scope.row.game_icon"
                  lazy
                />
              </template>
            </el-table-column>
            <el-table-column label="游戏名">
              <template slot-scope="scope">
                {{ scope.row.game_name }}
              </template>
            </el-table-column>
            <el-table-column label="包名" align="center">
              <template slot-scope="scope">
                <el-link type="success" :href="'https://play.google.com/store/apps/details?id=' + scope.row.class_name" target="_blank">
                  <i class="el-icon-view el-icon--right" />
                  {{ scope.row.class_name }}

                </el-link>
              </template>
            </el-table-column>
            <el-table-column class-name="age-limit-col" label="版本号" width="110" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.version }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="update_date" label="更新时间" width="110">
              <template slot-scope="scope">
                <i class="el-icon-time" />
                <span>{{ DateNew(scope.row.update_date) }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="update_date" label="操作" width="200">
              <template slot-scope="scope">

                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple"><el-button
                    type="text"
                    size="mini"
                    @click="GP_icon(scope.row)"
                  >更新ico+信息</el-button></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple"><el-button
                    type="text"
                    size="mini"
                    @click="view_look(scope.row)"
                  >查看</el-button>
                  </div></el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12"><div class="grid-content bg-purple">
                    <el-button
                      type="text"
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button></div></el-col>
                  <el-col :span="12"><div class="grid-content bg-purple"><el-button
                    type="text"
                    size="mini"
                    @click="DownloadConfiguration(scope.row)"
                  >下载配置</el-button></div></el-col>
                </el-row>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[25, 50, 75, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-divider><i class="el-icon-ship" /></el-divider>
    <!-- 查看内容 -->
    <el-dialog align="left" title="查看" width="80%" :visible.sync="view_lookVisible">
      <div class="demo-image__lazy">
        <el-image class="img_icon" :src="e.game_icon" lazy-placeholder />
        <div class="list_look">
          <span class="span_name">{{ e.game_name }}</span>
          <span>更新时间：{{ DateNew(e.update_date) }}</span>
          <span>版本号：<el-link type="warning">{{ e.version }}</el-link>
          </span> <!-- <span></span> -->
        </div>
      </div>

      <div>
        <el-collapse>
          <el-collapse-item title="游戏详情" name="2">
            <div v-html="formattedText(e.update_content)" />
          </el-collapse-item>
        </el-collapse>

        <el-row :gutter="20">
          <el-col :span="10"><div class="grid-content bg-purple" />包名：</el-col>
          <el-col :span="14"><div class="grid-content bg-purple" />{{ e.class_name }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10"><div class="grid-content bg-purple" />类型：</el-col>
          <el-col :span="14"><div class="grid-content bg-purple" />{{ e.description }}</el-col>
        </el-row>
        <div class="carousel_img">
          <el-carousel :interval="4000" :height="carouselHeight" type="card" :autoplay="true">
            <el-carousel-item v-for="(item, index) in e.game_detail_images" :key="index">
              <!-- <h3 class="medium">{{ item }}</h3> -->
              <div class="demo-image__lazy">
                <el-image
                  class="img_list"
                  :src="item"
                />
              </div>

            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <el-divider />
      <div slot="footer" class="dialog-footer">
        <el-button @click="view_lookVisible = false">取 消</el-button>
        <el-button type="primary" @click="view_lookVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 下载配置 -->

    <el-dialog class="Dowdialog" width="80%" align="left" title="下载配置" :visible.sync="Download_Configuration">
      <el-table ref="table" :data="Downs" style="width: 100%">

        <el-table-column prop="method" label="渠道" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.method" clearable placeholder="请输入内容" />
          </template>
        </el-table-column>
        <el-table-column prop="link" label="地址" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.link" clearable placeholder="请输入内容" />
          </template>
        </el-table-column>
        <el-table-column prop="method" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="delTableData(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="addTable">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addTableData()" />
      </div>

      <el-divider />
      <div slot="footer" class="dialog-footer">
        <el-button @click="Download_Configuration = false">取 消</el-button>
        <el-button type="primary" @click="getTableData">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      e: '',
      list: [], // 存储接口返回的数据
      listLoading: true,
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      total: 0, // 总数据条数
      input: '',
      multipleSelection: [],
      dialogFormVisible: false, // 添加游戏
      view_lookVisible: false, // 查看
      Download_Configuration: false, // 下载配置
      Downs: [],
      form: {
        name: '',
        region: '',
        delivery: false
      },
      formLabelWidth: '120px',
      carouselHeight: '120px',
      srcList: [], // 详情图
      options: [{
        value: '选项1',
        label: '名称'
      }, {
        value: '选项2',
        label: '包名'
      }],
      value: '名称'
    }
  },
  created() {
    this.fetchData()
    this.Downs = [
      { 'method': 'Method 1', 'link': 'Link 1' },
      { 'method': 'Method 2', 'link': 'Link 2' }
    ]
  },
  mounted() {
    // 将字符串转换成数组，并去除地址开头的反斜杠
    if (!this.e.game_detail_images) {
      return
    }
    this.$nextTick(() => {
      const elements = document.getElementsByClassName('img_list')[0]// 替换为您要获取高度的元素的ID
      console.log(elements)
      // const elements = document.querySelectorAll('.img_list')
      const height_i = elements.offsetHeight // 获取每个轮播项元素的高度
      console.log(height_i)
      this.carouselHeight = height_i.toString() + 'px'
    })
  },
  methods: {
    fetchData() {
      this.listLoading = true
      // 发送请求获取数据
      const url = `http://game.zaidu.in/game/GP_game?page=${this.currentPage}&pageSize=${this.pageSize}`
      fetch(url)
        .then(response => response.json())
        .then(data => {
          this.list = data.data // 将接口返回的数据赋值给列表
          this.total = data.total // 设置总数据条数
          this.listLoading = false
          this.$notify({
            title: '成功',
            message: '总共加载：' + data.total + '条数据',
            type: 'success'
          })
        })
        .catch(error => {
          console.error('Error:', error)
          this.listLoading = false
        })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.fetchData()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchData()
    },
    DateNew(dateString) {
      // const dateString = "2023-08-27T16:00:00.000Z";
      const date = new Date(dateString)
      const year = date.getFullYear() // 年份
      const month = date.getMonth() + 1 // 月份（注意月份从 0 开始，需要加 1）
      const day = date.getDate() // 日期

      const formattedDate = `${year}-${month}-${day} `
      return formattedDate
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    GP_icon(e) {
      const id = 'https://play.google.com/store/apps/details?id=' + e.class_name
      //   console.log(id)
      const url = 'http://game.zaidu.in/game/PutGame_icon'
      const data = {
        array: [id]
      }

      axios.post(url, data)
        .then(response => {
          console.log(response.data) // 处理响应
          this.$message({
            message: response.data.msg,
            type: 'success'
          })
        })
        .catch(error => {
          console.error(error) // 处理错误
        })
    },
    view_look(e) {
      // 查看游戏详情
      this.e = e
      this.view_lookVisible = true
      // console.log(this.e)
      // console.log(this.e.game_detail_images)
      try {
        e.game_detail_images = JSON.parse(this.e.game_detail_images).map(url => url.slice(0))
        console.log(this.e.game_detail_images)
        this.srcList = e.game_detail_images
        console.log(this.srcList)
      } catch (error) {
        e.game_detail_images = this.e.game_detail_images
      }
    },
    DownloadConfiguration(e) { // 下载配置
      console.log(e)
      this.e = e
      this.Download_Configuration = true
      console.log(this.e.download)
      this.Downs = JSON.parse(this.e.download)
      console.log(Array.isArray(this.Downs))
    },
    getTableData() { // 获取下载配置提交
      console.log(this.Downs)
      console.log(this.e.class_name)
      const data = {
        class_name: this.e.class_name,
        download: this.Downs
      }
      axios.post('http://game.zaidu.in/game/PutGame_link', data)
        .then(response => {
          console.log(response.data) // 处理响应数据
          this.$message({
            message: '已更新~',
            type: 'success'
          })
          this.Download_Configuration = false
          this.fetchData()
        })
        .catch(error => {
          console.error(error)
        })
    },
    addTableData() { // 添加下载配置提交
      const newObject = {
        'method': '蓝奏云',
        'link': ''
      }
      // 向数组中添加新对象
      this.Downs.push(newObject)
      // console.log(this.Downs)
    },
    delTableData(e, w) { // 删除下载配置提交
      console.log(e)
      // 要删除的元素的下标
      this.Downs.splice(e, 1)
      // console.log(this.Downs)
    },
    formattedText(w) { // 文本内容格式化
      w = this.e.update_content ? this.e.update_content : 0
      // console.log(w)
      if (w !== 0) {
        const r = w.replace(/。/g, '。<br>')
        return r
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      //  获取选中元素
      const classNames = []
      this.multipleSelection.forEach(item => {
        classNames.push('https://play.google.com/store/apps/details?id=' + item.class_name)
      })
      this.multipleSelection = classNames
      // console.log(this.multipleSelection)
    },
    putIcon() { // 批量更新icon
      if (this.multipleSelection.length === 0) {
        return this.$message.error('至少选择一项数据~')
      }
      console.log(this.multipleSelection)
      //   console.log(id)
      const url = 'http://game.zaidu.in/game/PutGame_icon'
      const data = {
        array: this.multipleSelection
      }
      axios.post(url, data)
        .then(response => {
          console.log(response.data) // 处理响应
          this.$message({
            message: response.data.msg,
            type: 'success'
          })
        })
        .catch(error => {
          console.error(error) // 处理错误
        })
    },
    putConter() {
      if (this.multipleSelection.length === 0) {
        return this.$message.error('至少选择一项数据~')
      }
      console.log(this.multipleSelection)
      const url = 'http://game.zaidu.in/game/Put_conter'
      const data = {
        array: this.multipleSelection
      }
      axios.post(url, data)
        .then(response => {
          console.log(response.data) // 处理响应
          this.$message({
            message: response.data.msg,
            type: 'success'
          })
        })
        .catch(error => {
          console.error(error) // 处理错误
        })
    },
    addGPgame() { // 添加游戏
      console.log(this.form)
      this.dialogFormVisible = false
    },
    search() { // 搜索
      console.log('sousuo')
    }
  }
}
</script>
<style scoped>
.add{
    text-align: end;
    padding: 0 0 10px;
}
.header{
    padding: 20px;
}
.search{
    text-align: end;
    display: flex;
}
.demo-image__lazy{
  display: flex;
}
.list_look{
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 0 0 10px;
}
.span_name {
  /* 添加样式 */
  font-size: 20px;
  font-family: fantasy;
  color: brown;
}
.list_look span:nth-child(2) {
  /* 添加样式 */

}
.el-carousel__item h3 {
  color: #ffffff;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.img_icon{
  border-radius: 10px;
}
.carousel_img{
  overflow:visible ;
}
.addTable{
  display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
}
.Dowdialog{

}

</style>
